<template>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

    <div class="demo-layout-transparent mdl-layout mdl-js-layout">
        <header class="mdl-layout__header mdl-layout__header--transparent">
            <div class="mdl-layout__header-row">
                <!-- Title -->
                <span class="mdl-layout-title">登入 卖夕夕</span>
                <!-- Add spacer, to align navigation to the right -->
                <div class="mdl-layout-spacer"></div>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">登入 卖夕夕</span>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" @click="backToWelcome">以游客状态访问</a>
            </nav>
        </div>
        <main class="mdl-layout__content mid">
            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title">
                    <h2 class="mdl-card__title-text">欢迎！</h2>
                </div>
                <div class="mdl-card__supporting-text">
                    输入您的账户信息
                    <!-- Simple Textfield -->
                    <form action="#">
                        <div class="mdl-textfield mdl-js-textfield">
                            <input class="mdl-textfield__input" type="text" id="input_user">
                            <label class="mdl-textfield__label" for="input_user">用户名...</label>
                        </div>
                    </form>
                    <!-- Simple Textfield -->
                    <form action="#">
                        <div class="mdl-textfield mdl-js-textfield">
                            <input class="mdl-textfield__input" type="password" id="input_password">
                            <label class="mdl-textfield__label" for="input_password">密码...</label>
                        </div>
                    </form>
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="this.switch">
                        转到注册
                    </a>
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                        @click="LoginButtonOnclick">
                        登录
                    </a>
                </div>
            </div>
        </main>
    </div>

    <!-- 消息 -->
    <div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
        <div class="mdl-snackbar__text"></div>
        <button class="mdl-snackbar__action" type="button"></button>
    </div>
</template>

<script>
export default {
    methods: {
        backToWelcome() {
            window.location.href = "/#/welcome"
            window.location.reload();
        },
        LoginButtonOnclick() {
            var user = document.querySelector("#input_user").value
            var password = document.querySelector("#input_password").value

            if (user == "" || password == "") {
                this.msg("用户名或密码不能为空")
            } else {
                this.$axios({
                    method: "post",
                    url: "/user/login",
                    params: {
                        "user": user,
                        "password": password
                    }
                }).then((res) => {
                    if (res.data.code == "0") {
                        this.backToWelcome()
                    } else {
                        this.msg(res.data.msg)
                    }
                })
            }
        },
        msg(msg) {
            var snackbarContainer = document.querySelector('#demo-toast-example');
            var data = { message: msg };
            snackbarContainer.MaterialSnackbar.showSnackbar(data);
        },
        switch() {
            window.location.href = "/#/registe"
            window.location.reload();
        }
    }
}
</script>

<style lang="scss" scoped>
.demo-layout-transparent {
    background: url('../assets/img/catia-dombaxe-2P7sQxc_MbA-unsplash.jpg') center / cover;
}

.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
    /* This background is dark, so we set text to white. Use 87% black instead if
     your background is light. */
    color: white;
}

.demo-card-wide.mdl-card {
    width: 512px;
}

.demo-card-wide>.mdl-card__title {
    color: #fff;
    height: 176px;
    background: url('../assets/img/freestocks-spP6LqxN0-g-unsplash.jpg') center / cover;
}

.demo-card-wide>.mdl-card__menu {
    color: #fff;
}

.mid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 20px;
    justify-content: center;
    align-content: center;
}
</style>